// 修复导入语句，添加 useState
import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
// 只导入我们确定存在的组件
import { Form, Input, Checkbox, Button } from 'antd-mobile';
import '../App.css';

function AddAddress() {
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [address, setAddress] = useState('');
  const [doorNumber, setDoorNumber] = useState('');
  const [isDefault, setIsDefault] = useState(false);
  const [tag, setTag] = useState('');
  const [showPastePanel, setShowPastePanel] = useState(false);
  const [pasteContent, setPasteContent] = useState('');
  const [isEditing, setIsEditing] = useState(false);
  const [editId, setEditId] = useState('');
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    // 检查是否有编辑信息
    if (location.state && location.state.id) {
      setIsEditing(true);
      setEditId(location.state.id);
      const addressInfo = location.state.address;
      setName(addressInfo.name || '');
      setPhone(addressInfo.phone || '');
      setAddress(addressInfo.di || '');
      setDoorNumber(addressInfo.xiang || '');
      setIsDefault(addressInfo.isDefault === true || addressInfo.isDefault === 'true' || addressInfo.isDefault === 1 || addressInfo.mo === true || addressInfo.mo === 'true' || addressInfo.mo === 1);
    }
  }, [location]);

  const handleSubmit = (e) => {
    e.preventDefault();
    // 简单的表单验证
    if (!name || !phone || !address) {
      alert('请填写必填字段');
      return;
    }

    const formData = {
      _id: editId, // 添加 _id 字段
      name,
      phone,
      address: address + ' ' + doorNumber,
      mo: isDefault,
      xiang: tag, // 把 tag 改为 xiang
      top: false  // 添加 top 字段，默认为 false
    };

    console.log('提交表单数据:', formData);

    // 确定是添加还是修改
    const url = isEditing ? 'http://localhost:3000/update' : 'http://localhost:3000/add';
    const method = isEditing ? 'PUT' : 'POST'; // 编辑时使用 PUT 方法

    // 发送请求到后端
    fetch(url, {
      method: method,
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
      .then(res => {
        console.log('响应状态:', res.status);
        console.log('响应头:', res.headers);
        return res.json();
      })
      .then(data => {
        console.log('响应数据:', data);
        if (data.code === 200) {
          // 提交成功后返回地址管理页面
          navigate('/address-management');
        } else {
          alert('操作失败: ' + data.message);
        }
      })
      .catch(error => {
        console.error('操作失败:', error);
        alert('操作失败，请稍后重试');
      });
  };

  const handlePasteConfirm = () => {
    // 尝试从粘贴内容中提取信息
    try {
      let name = '';
      let phone = '';
      let address = '';
      let doorNumber = '';

      // 提取手机号 (简单的手机号匹配)
      const phoneMatch = pasteContent.match(/1[3-9]\d{9}/);
      if (phoneMatch) {
        phone = phoneMatch[0];
      }

      // 提取收货人 (假设在手机号前面)
      if (phone) {
        const phoneIndex = pasteContent.indexOf(phone);
        if (phoneIndex > 0) {
          name = pasteContent.substring(0, phoneIndex).trim();
        }
      }

      // 提取地址和门牌号 (假设在手机号后面)
      if (phone) {
        const phoneIndex = pasteContent.indexOf(phone);
        if (phoneIndex + phone.length < pasteContent.length) {
          const rest = pasteContent.substring(phoneIndex + phone.length).trim();
          // 简单地将剩余部分作为地址
          address = rest;
          // 尝试提取门牌号 (假设是数字+字母/汉字的组合)
          const doorNumberMatch = rest.match(/\d+[\w\u4e00-\u9fa5]*/);
          if (doorNumberMatch) {
            doorNumber = doorNumberMatch[0];
            // 从地址中移除门牌号
            address = rest.replace(doorNumber, '').trim();
          }
        }
      }

      // 设置提取的信息
      if (name) setName(name);
      if (phone) setPhone(phone);
      if (address) setAddress(address);
      if (doorNumber) setDoorNumber(doorNumber);
    } catch (error) {
      console.error('解析粘贴内容失败:', error);
      // 如果解析失败，就简单地将粘贴内容设置到地址字段
      setAddress(pasteContent);
    }

    setShowPastePanel(false);
  };

  const togglePastePanel = () => {
    setShowPastePanel(!showPastePanel);
  };

  const clearForm = () => {
    setName('');
    setPhone('');
    setAddress('');
    setDoorNumber('');
    setIsDefault(false);
  };

  const handleMapClick = () => {
    // 尝试获取当前位置坐标
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const latitude = position.coords.latitude;
          const longitude = position.coords.longitude;
          // 打开高德地图并传入当前位置坐标以实现更精准的定位
          window.open(`https://ditu.amap.com/?latitude=${latitude}&longitude=${longitude}&name=我的位置`, '_blank');
        },
        (error) => {
          console.error('获取位置信息失败:', error);
          // 显示用户友好的错误信息
          let errorMsg = '获取位置信息失败';
          switch (error.code) {
            case error.PERMISSION_DENIED:
              errorMsg = '您拒绝了定位请求，请在浏览器设置中启用位置权限';
              break;
            case error.POSITION_UNAVAILABLE:
              errorMsg = '位置信息不可用，请检查网络连接或尝试其他位置';
              break;
            case error.TIMEOUT:
              errorMsg = '定位请求超时，请稍后重试';
              break;
            default:
              errorMsg = '获取位置信息失败，将尝试使用后端定位服务';
              // 调用后端定位接口
              fetch('http://localhost:3000/api/getLocation', {
                method: 'GET'
              })
                .then(res => res.json())
                .then(data => {
                  if (data.latitude && data.longitude) {
                    window.open(`https://ditu.amap.com/?latitude=${data.latitude}&longitude=${data.longitude}&name=我的位置`, '_blank');
                  } else {
                    window.open('https://ditu.amap.com/', '_blank');
                  }
                })
                .catch(err => {
                  console.error('调用后端定位服务失败:', err);
                  window.open('https://ditu.amap.com/', '_blank');
                });
              return;
          }
          alert(errorMsg);
          // 如果获取位置失败，则打开默认的高德地图
          window.open('https://ditu.amap.com/', '_blank');
        },
        {
          enableHighAccuracy: true, // 启用高精度定位
          timeout: 5000, // 超时时间5秒
          maximumAge: 0 // 不使用缓存的位置信息
        }
      );
    } else {
      // 浏览器不支持地理定位
      alert('您的浏览器不支持地理定位，将尝试使用后端定位服务');
      // 调用后端定位接口
      fetch('http://localhost:3000/api/getLocation', {
        method: 'GET'
      })
        .then(res => res.json())
        .then(data => {
          if (data.latitude && data.longitude) {
            window.open(`https://ditu.amap.com/?latitude=${data.latitude}&longitude=${data.longitude}&name=我的位置`, '_blank');
          } else {
            window.open('https://ditu.amap.com/', '_blank');
          }
        })
        .catch(err => {
          console.error('调用后端定位服务失败:', err);
          window.open('https://ditu.amap.com/', '_blank');
        });
    }
    console.log('地图图标被点击');
  };
// ... 前面的代码保持不变 ...

// 移除这个多余的 }

return (
  <div style={{ minHeight: '100vh', backgroundColor: '#f5f5f5', paddingTop: '70px', boxSizing: 'border-box', width: '100%', position: 'fixed', top: '0', left: '0', right: '0', overflow: 'auto' }}>
    {/* 顶部栏 */}
    <div style={{ display: 'flex', alignItems: 'center', backgroundColor: '#fff', padding: '15px 0', position: 'fixed', top: '0', left: '0', right: '0', zIndex: '100', boxShadow: '0 2px 10px rgba(0,0,0,0.05)' }}>
      <span onClick={() => navigate(-1)} style={{ cursor: 'pointer', fontSize: '20px', marginLeft: '20px', marginRight: '20px' }}>←</span>
      <h1 style={{ fontWeight: 'bold', fontSize: '20px', color: '#333', margin: 0, flex: 1, textAlign: 'center' }}>
        {isEditing ? '编辑收货地址' : '新增收货地址'}
      </h1>
    </div>

    {/* 表单内容 */}
    <Form onSubmit={handleSubmit} style={{ background: '#fff', margin: '20px', borderRadius: '12px', padding: '20px', boxShadow: '0 2px 10px rgba(0,0,0,0.05)' }}>
      {/* 收货人 */}
      <div style={{ marginBottom: '25px' }}>
        <div style={{ marginBottom: '10px', color: '#333', fontWeight: '500' }}>收货人</div>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Input
            value={name}
            onChange={(value) => setName(value)}
            placeholder="请填写收货人姓名"
            style={{
              flex: 1,
              border: '1px solid #eee',
              borderRadius: '8px',
              padding: '12px',
              fontSize: '16px',
              color: '#333'
            }}
          />
          {name && (
            <span
              onClick={() => setName('')}
              style={{ color: '#999', fontSize: '14px', cursor: 'pointer', marginLeft: '10px' }}
            >
              清除
            </span>
          )}
          <span style={{ color: '#999', fontSize: '14px', cursor: 'pointer', marginLeft: '15px' }}>
            通讯录
          </span>
        </div>
      </div>

      {/* 手机号 */}
      <div style={{ marginBottom: '25px' }}>
        <div style={{ marginBottom: '10px', color: '#333', fontWeight: '500' }}>手机号</div>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <span style={{ marginRight: '10px', color: '#333' }}>+86</span>
          <Input
            type="tel"
            value={phone}
            onChange={(value) => setPhone(value)}
            placeholder="请填写收货人手机号"
            style={{
              flex: 1,
              border: '1px solid #eee',
              borderRadius: '8px',
              padding: '12px',
              fontSize: '16px',
              color: '#333'
            }}
          />
          {phone && (
            <span
              onClick={() => setPhone('')}
              style={{ color: '#999', fontSize: '14px', cursor: 'pointer', marginLeft: '10px' }}
            >
              清除
            </span>
          )}
        </div>
      </div>

      {/* 地址输入 */}
      <div style={{ marginBottom: '25px' }}>
        <div style={{ marginBottom: '10px', color: '#333', fontWeight: '500' }}>地址</div>
        <div style={{ display: 'flex', alignItems: 'center', marginBottom: '15px' }}>
          <Input
            type="text"
            value={address}
            onChange={(value) => setAddress(value)}
            placeholder="选择收货地址"
            style={{
              flex: 1,
              border: '1px solid #eee',
              borderRadius: '8px',
              padding: '12px',
              fontSize: '16px',
              color: '#333'
            }}
          />
          {address && (
            <span
              onClick={() => setAddress('')}
              style={{ color: '#999', fontSize: '14px', cursor: 'pointer', marginLeft: '10px' }}
            >
              清除
            </span>
          )}
          <svg t="1753184056763" onClick={handleMapClick} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22333" width="20" height="20" style={{ marginLeft: '10px', color: '#f33c24' }}>
            <path d="M512 896c-200.533333-145.066667-298.666667-285.866667-298.666667-426.666667 0-166.4 132.266667-298.666667 298.666667-298.666666s298.666667 132.266667 298.666667 298.666666c0 140.8-98.133333 281.6-298.666667 426.666667z m0-119.466667c140.8-106.666667 213.333333-209.066667 213.333333-307.2 0-119.466667-93.866667-213.333333-213.333333-213.333333s-213.333333 93.866667-213.333333 213.333333c0 98.133333 72.533333 200.533333 213.333333 307.2z m0-179.2c-72.533333 0-128-55.466667-128-128s55.466667-128 128-128 128 55.466667 128 128-55.466667 128 128-128 128 128z m0-85.333333c25.6 0 42.666667-17.066667 42.666667-42.666667s-17.066667-42.666667-42.666667-42.666666-42.666667 17.066667-42.666667 42.666666 17.066667 42.666667 42.666667 42.666667z" fill="#f33c24" p-id="22334"></path>
          </svg>
        </div>

        {/* 定位信息 */}
        <div style={{ backgroundColor: '#fafafa', padding: '15px', borderRadius: '8px' }}>
          <div style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
            <span style={{ color: '#333', fontWeight: 'bold', marginRight: '10px' }}>当前定位:</span>
            <span style={{ color: '#333' }}>保定理工学院</span>
            <span style={{ color: '#666', marginLeft: '8px', fontSize: '14px' }}>河北保定市莲池区</span>
          </div>
          <Button
            onClick={() => setAddress('保定理工学院 河北保定市莲池区')}
            size="small"
            style={{
              padding: '6px 12px',
              backgroundColor: '#ff4d4f',
              color: '#fff',
              border: 'none',
              borderRadius: '4px',
              fontSize: '14px',
              cursor: 'pointer'
            }}
          >
            使用
          </Button>
        </div>
      </div>

      {/* 门牌号 */}
      <div style={{ marginBottom: '25px' }}>
        <div style={{ marginBottom: '10px', color: '#333', fontWeight: '500' }}>门牌号</div>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Input
            type="text"
            value={doorNumber}
            onChange={(value) => setDoorNumber(value)}
            placeholder="例: 6栋201室"
            style={{
              flex: 1,
              border: '1px solid #eee',
              borderRadius: '8px',
              padding: '12px',
              fontSize: '16px',
              color: '#333'
            }}
          />
          {doorNumber && (
            <span
              onClick={() => setDoorNumber('')}
              style={{ color: '#999', fontSize: '14px', cursor: 'pointer', marginLeft: '10px' }}
            >
              清除
            </span>
          )}
        </div>
      </div>

      {/* 地址粘贴板 */}
      <div style={{ marginBottom: '25px' }}>
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            padding: '15px',
            backgroundColor: '#f5f5f5',
            borderRadius: '8px',
            cursor: 'pointer'
          }}
          onClick={togglePastePanel}
        >
          <span style={{ color: '#666' }}>地址粘贴板</span>
          {!showPastePanel ? (
            <svg t="1753201260765" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2355" width="16" height="16" style={{ marginLeft: '10px', color: '#666' }}>
              <path d="M966.4 323.2c-9.6-9.6-25.6-9.6-35.2 0l-416 416-425.6-416c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l441.6 432c9.6 9.6 25.6 9.6 35.2 0l435.2-432c9.6-12.8 9.6-25.6 0-35.2z" fill="#2c2c2c" p-id="2356"></path>
            </svg>
          ) : (
            <svg t="1753201313088" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3498" width="16" height="16" style={{ marginLeft: '10px', color: '#666' }}>
              <path d="M966.4 668.8l-435.2-432c-9.6-9.6-25.6-9.6-35.2 0l-441.6 432c-9.6 9.6-9.6 25.6 0 35.2 9.6 9.6 25.6 9.6 35.2 0l425.6-416 416 416c9.6 9.6 25.6 9.6 35.2 0S976 678.4 966.4 668.8z" p-id="3499" fill="#2c2c2c"></path>
            </svg>
          )}
        </div>

        {showPastePanel && (
          <div style={{ marginTop: '10px', padding: '15px', backgroundColor: '#fff', borderRadius: '8px', border: '1px solid #eee' }}>
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '15px' }}>
              <Input
                value={pasteContent}
                onChange={(value) => setPasteContent(value)}
                placeholder="试试粘贴收货人姓名、手机号、收货地址，可快速识别您的收货信息"
                style={{
                  flex: 1,
                  border: '1px solid #eee',
                  borderRadius: '8px',
                  padding: '12px',
                  fontSize: '16px',
                  color: '#333'
                }}
              />
              {pasteContent && (
                <span
                  onClick={() => setPasteContent('')}
                  style={{ color: '#999', fontSize: '14px', cursor: 'pointer', marginLeft: '10px' }}
                >
                  清除
                </span>
              )}
            </div>
            <Button
              onClick={handlePasteConfirm}
              style={{
                width: '100%',
                padding: '12px',
                backgroundColor: '#ff4d4f',
                color: '#fff',
                border: 'none',
                borderRadius: '8px',
                fontSize: '16px',
                fontWeight: 'bold',
                cursor: 'pointer'
              }}
            >
              确认粘贴
            </Button>
          </div>
        )}
      </div>

      {/* 设为默认地址 */}
      <div style={{ marginBottom: '30px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <span>设为默认地址</span>
            <span style={{ color: '#999', marginLeft: '8px', fontSize: '12px' }}>下单时会优先使用该地址</span>
          </div>
          <Checkbox
            checked={isDefault}
            onChange={(checked) => setIsDefault(checked)}
            style={{
              '--icon-size': '20px',
              '--checked-color': '#ff4d4f'
            }}
          />
        </div>
      </div>

      {/* 操作按钮组 */}
      <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
        <Button
          onClick={clearForm}
          style={{
            flex: 1,
            padding: '15px',
            backgroundColor: '#fff',
            color: '#333',
            border: '1px solid #eee',
            borderRadius: '8px',
            fontSize: '16px',
            fontWeight: 'bold',
            cursor: 'pointer'
          }}
        >
          清除
        </Button>
        <Button
          type="submit"
          onClick={handleSubmit}
          style={{
            flex: 1,
            padding: '15px',
            backgroundColor: '#ff4d4f',
            color: '#fff',
            border: 'none',
            borderRadius: '8px',
            fontSize: '16px',
            fontWeight: 'bold',
            cursor: 'pointer'
          }}
        >
          提交
        </Button>
      </div>
    </Form >
  </div >
);
}

export default AddAddress;



